<template>
  <div class="containenr">
    <dv-scroll-board :config="configData" :headerBGC="'#ff0000'" align="2"  style="width: 100%;height:100%;text-align: center;"></dv-scroll-board>
  </div>
</template>
<script>
export default{
  name: "ElTabledataV",
  props:{
    tableConfig:{
      type:Array,
      default:()=>[]
    },
    tableData:{
      type:Array,
      default:()=>[]
    },
    headerShow:{
      type:Boolean,
      default:false
    },
  },
  mounted(){
    // console.log('this.tableConfig',this.tableConfig);
    // console.log('this.tableData',this.tableData);
  },
  computed:{
    configData(){
      let header = [];
      let data = [];
      let headerBGC,oddRowBGC = 'transparent';
      let evenRowBGC = '#126da7';
      let headerHeight = 35*this.$store.state.htmlScale;
      let rowHeight = 30*this.$store.state.htmlScale;
      let waitTime = 1000
      this.tableConfig.forEach((item)=>{
        header.push(`<span style="font-size:1.2rem;text-align:center;min-width:{$item.width};">`+item.label+`</span>`)
      });
      this.tableData.forEach((item)=>{
        data.push([`<span style="height:2rem;font-size:1.2rem;text-align:center;min-width:{$item.width};">`+item.number+`</span>`,`<span style="height:2rem;font-size:1.2rem;text-align:center;min-width:{$item.width};">`+item.name+`</span>`,`<span style="height:2rem;font-size:1.2rem;text-align:center;min-width:{$item.width};">`+item.price+`</span>`])
      });
      return{
        header,
        data,
        headerBGC,
        oddRowBGC,
        evenRowBGC,
        headerHeight,
        rowHeight,
        waitTime
      }
    }
  },
  watch:{
    tableConfig: {
      handler() {
        this.$nextTick(() => {
          console.log('this.tableConfig',this.tableConfig);
          console.log('this.configData',this.configData);
        })
      },
      deep: true,
      immediate: true
    },
    tableData: {
      handler() {
        this.$nextTick(() => {
          console.log('this.tableData',this.tableData);
        })
      },
      deep: true,
      immediate: true
    },
  }
}
</script>

<style lang="less" scoped>
.containenr{
  width: 100%;
  height: 50%;
  border: 0.2rem solid red;
}
</style>
